<template>
    <view class="slider">
        <slider
            style="margin: 0"
            :value="value"
            :min="min"
            :max="max"
            :step="step"
            :active-color="activeColor"
            :background-color="backgroundColor"
            :block-size="blockSize"
            :show-value="showValue"
            :disabled="disabled"
            @change="onChange"
            @changing="onChanging"
        ></slider>
    </view>
</template>
<script lang="ts" setup>
/**
 * @description 支持多种颜色显示
 * @property {Number} modelValue 绑定值
 * @property {Boolean} disabled 是否禁用
 * @property {Number} min 最小值
 * @property {Number} max 最大值
 * @property {Number} step 步长，默认1
 * @property {String} activeColor 滑块左侧已选择部分的线条颜色
 * @property {String} backgroundColor 滑块右侧背景条的颜色，默认#e9e9e9
 * @property {Number} blockSize 滑块的大小，默认20
 * @property {Boolean} showValue 是否显示当前 value
 * @event {Function} change 绑定值改变时触发
 * @event {Function} changing 拖动过程中触发
 */
import { ref, watch } from 'vue'
const props = defineProps({
    modelValue: {
        type: Number,
        required: true
    },
    disabled: {
        type: Boolean,
        default: null
    },
    min: {
        type: Number,
        default: 0
    },
    max: {
        type: Number,
        default: 100
    },
    step: {
        type: Number,
        default: 1
    },
    activeColor: {
        type: String,
        default: '#409eff'
    },
    backgroundColor: {
        type: String,
        default: '#e9e9e9'
    },
    blockSize: {
        type: Number,
        default: 15
    },
    showValue: {
        type: Boolean,
        default: true
    }
})
const emit = defineEmits(['update:modelValue', 'change', 'changing'])
const value = ref<number>(0)
watch(
    () => props.modelValue,
    (val) => {
        value.value = val
    },
    {
        immediate: true
    }
)
function onChange(e: any) {
    emit('update:modelValue', e.detail.value)
    emit('change', e)
}
function onChanging(e: any) {
    emit('update:modelValue', e.detail.value)
    emit('changing', e)
}
</script>

<style lang="scss">
.slider {
    :deep() {
        .uni-slider-value {
            width: 5.5ch;
            line-height: 44rpx;
            white-space: nowrap;
        }
        .uni-slider-handle-wrapper {
            height: 6px;
        }
    }
}
</style>
